<template>
  <div>
    <div class="config_top">
      <el-button type="success" @click="addtable">添加表格</el-button>
      <el-button type="success" @click="savetable">保存数据</el-button>
    </div>
    <div class="aonfig_hader">
      <el-table :data="tableData"
      @cell-dblclick="edit"
      :header-cell-style="thStyleFun"
        :cell-style="cellStyleFun"
       style="width: 100%">
                  <!--插槽内部-->
                  <el-table-column type="expand"  @cell-dblclick="edit">
                          <template slot-scope="props">
                                      <el-form  label-position="center" 
                                       inline  class="demo-table-expand">
                                          <el-form-item label="dev : "  >
                                              <el-input
                                                  class="demo_input"
                                                  v-if="props.row.CONF.isEdit"
                                                  v-model="props.row.CONF.dev"
                                                  size="mini"
                                                ></el-input>
                                              <span v-else @click="devclick">{{ props.row.CONF.dev}}</span>
                                          </el-form-item>

                                            <el-form-item label="secDev : "  >
                                              <el-input
                                                   class="demo_input"
                                                   style=" margin-left:117px"
                                                  v-if="props.row.CONF.isEdit"
                                                  v-model="props.row.CONF.secDev"
                                                  size="mini"
                                                ></el-input>
                                              <span v-else @click="devclick">{{ props.row.CONF.secDev}}</span>
                                          </el-form-item>

                                          <el-form-item label="val : "  >
                                              <el-input
                                                  class="demo_input"
                                                  style=" margin-left:146px"
                                                  v-if="props.row.CONF.isEdit"
                                                  v-model="props.row.CONF.val"
                                                  size="mini"
                                                ></el-input>
                                              <span v-else @click="devclick">{{ props.row.CONF.val}}</span>
                                          </el-form-item>
                                    <!-- <el-table :data="items"
                                      border
                                      style="100%"
                                      @cell-dblclick="isedit"
                                      > -->
                                          <!-- <el-table-column label="dev" prop="dev">
                                            <template slot-scope="scope">
                                              <el-form :model="scope.row">
                                                <el-input
                                                  v-if="scope.row.isEdit"
                                                  v-model="scope.row.dev"
                                                  @blur="onblur(scope.row.userId, scope.row.dev)"
                                                  size="mini"
                                                ></el-input>
                                                <span v-else>{{ scope.row.dev }}</span>
                                              </el-form>
                                            </template>
                                          </el-table-column>-->
                                          <!-- <el-table-column label="name" prop="name">
                                            <template slot-scope="scope">
                                              <el-form :model="scope.row">
                                                <el-input
                                                  v-if="scope.row.isEdit"
                                                  v-model="scope.row.name"
                                                  @blur="onblurT(scope.row.userId, scope.row.name)"
                                                  size="mini"
                                                ></el-input>
                                                <span v-else>{{ scope.row.name }}</span>
                                              </el-form>
                                            </template>
                                          </el-table-column>       -->

                                          <!-- <el-table-column label="value" prop="val">
                                            <template slot-scope="scope">
                                              <el-form :model="scope.row">
                                                <el-input
                                                  v-if="scope.row.isEdit"
                                                  v-model="scope.row.val"
                                                  @blur="onblurY(scope.row.userId, scope.row.val)"
                                                  size="mini"
                                                ></el-input>
                                                <span v-else>{{ scope.row.val }}</span>
                                              </el-form>
                                            </template>
                                          </el-table-column>       -->

                                          <!-- <el-table-column label="操作">
                                            <template slot-scope="scope">
                                              <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDeleteitem(scope.$index, scope.row)"
                                                >删除</el-button
                                              >
                                            </template>
                                          </el-table-column> -->
                                        </el-form>
                                   
                                  </template>
                  </el-table-column>

                  <!--外层 -->
                <el-table-column label="CODE"> 
                            <template slot-scope="scope">
                              <el-form :model="scope.row">
                                    <el-select
                                        v-if="scope.row.isEdit"
                                        v-model="scope.row.CODE"
                                      clearable
                                      size="mini"
                                      style="margin-left: 5px; margin-top: 0px; width: 140px"
                                      placeholder="请选择内容"
                                        >
                                        <el-option  v-for="(item,index) in listcode" :key="index"  
                                        :label="item"  :value="item"></el-option>
                                      </el-select>
                                <span v-else>{{ scope.row.CODE }}</span>
                              </el-form>
                          </template>
                  </el-table-column>
                  <el-table-column label="ENABLE"> 
                          <template slot-scope="scope">
                            <el-form :model="scope.row">
                              <el-select
                                      v-if="scope.row.isEdit"
                                      v-model="scope.row.ENABLE"
                                      clearable
                                      size="mini"
                                      style="margin-left: 5px; margin-top: 0px; width: 140px"
                                      placeholder="请选择内容"
                                        >
                                        <el-option  label="ON"  value="ON"></el-option>
                                        <el-option  label="OFF"  value="OFF"></el-option>
                                      </el-select>
                              <span v-else>{{ scope.row.ENABLE }}</span>
                            </el-form>
                          </template>
                  </el-table-column>
                  <el-table-column label="TAG" prop="TAG">
                        <template slot-scope="scope">
                            <el-form :model="scope.row">
                              <el-input
                                v-if="scope.row.isEdit"
                                v-model="scope.row.TAG"
                                size="mini"
                                @blur="blurTag(scope.row.userId, scope.row.TAG)"
                              ></el-input>
                              <span v-else>{{ scope.row.TAG }}</span>
                            </el-form>
                        </template>
                  </el-table-column>
                    <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                       :loading="scope.row.isLoading"
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                      >
                    </template>
                    </el-table-column>
                </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tablelist:[],
      items:[],
      listcode:[]
    };
  },
  mounted() {
      this.getTablelist()
  },

  methods: {
   getTablelist(){
      this.ajax.get('func/1023/selAlarmMonitor').then((res)=>{
          if(res.status == 200){
            console.log(res.data)
             this.listcode=[];
                res.data.monitor.forEach((ele)=>{
                    this.$set(ele, "isEdit", false);
                    this.$set(ele, "isAbnormal", false);
                    this.$set(ele.CONF, "isEdit", false);
                    this.$set(ele.CONF, "isAbnormal", false);
                 
                })
                res.data.codeList.forEach((ele) => {
                this.listcode.push(ele.CODE)
                }); 
                this.tableData = res.data.monitor;
                for(let i=0;i<this.tableData.length; i++){
                  this.tablelist = this.tableData[i].CONF;
                 
                }
                // console.log(this.listcode)
                // console.log(this.tableData)
                // this.items=[];
                // this.tablelist.forEach((ele)=>{
                //    this.$set(ele, "isEdit", false);
                //    this.$set(ele, "isAbnormal", false);
                //    this.items.push(ele);
                //   })
          }
      })
     
   },
     edit(row, column, cell, event) {
      // console.log(row),
      // console.log(column)
      console.log(cell);
      console.log(event);
      if (row.isEdit) return;
      row.isEdit = !row.isEdit;
    },

     isedit(row, column, cell, event) {
      console.log(cell);
      console.log(event);
      if (row.isEdit) return;
      row.isEdit = !row.isEdit;
    },
   
    devclick(){
     console.log('1111111111');
      this.tableData.forEach((ele)=>{
         ele.CONF.isEdit = !ele.CONF.isEdit
      })
    },


    blur(item,id){
      if (id == "") {
        this.$alert("CODE不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

   blurphone(item,id){
          if (id == "") {
            this.$alert("ENABLE不能为空", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
   },
   
   blurTag(item,id){
          if (id == "") {
            this.$alert("TAG不能为空", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
   },

    thStyleFun() {
      return "text-align: center;background:#696969;color:#fff;text-align:center";
    },
    cellStyleFun() {
      return "text-align:center";
    },


    addtable() {
      if(this.tableData.length){
        let obj = {
          isAbnormal: false,
          isEdit: false,
          CODE:'',
          ENABLE:'',
          TAG:'',
          CONF:{
            dev:'',
            val:'',
            secDev:'',
            isEdit:false,
            isAbnormal:false
          }
          // CONF:this.items
        }
        this.tableData.unshift(obj) 
      }else{
        this.tableData.unshift({
           CODE:1001,
           isAbnormal:false,
           isEdit:false ,
           ENABLE:"false",
           TAG:"良率",
           CONF:{
            dev:this.tableData[0].CONF.dev,
            val:this.tableData[0].CONF.val,
            secDev:this.tableData[0].CONF.secDev,
            isEdit:this.tableData[0].CONF.isEdit,
            isAbnormal:this.tableData[0].CONF.isAbnormal
          }
        })
      }
    },
    savetable() {
      let ary = [];
      this.tableData.forEach((item) => {
        let obj = {
          isAbnormal: item.isAbnormal,
          isEdit: item.isEdit,
          CODE:item.CODE,
          ENABLE:item.ENABLE,
          TAG:item.TAG,
          CONF:{
            dev:item.CONF.dev,
            val:item.CONF.val,
            secDev:item.CONF.secDev
          }
        };
        ary.push(obj);
            // console.log(ary)
      });

      for (let i = 0; i < ary.length - 1; i++) {
        if (ary[i].CODE == ary[i + 1].CODE) {
          this.$alert(ary[i].CODE, "CODE不能相同", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
        }else if(ary[i].CODE == ""){
          this.$alert(ary[i].CODE, "CODE不能为空", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
        } else if(ary[i].ENABLE == ""){
               this.$alert(ary[i].ENABLE, "ENABLE不能为空", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
          }else if(ary[i].TAG == ""){
             this.$alert(ary[i].TAG, "TAG不能为空", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
          }else{
              this.ajax({
                method: "POST",
                url: "func/1023/updateAlarmMonitor?",
                data: ary,
                }).then((res) => {
                  if (res.data.code == 2000) {
                    this.$message({
                      message: "保存成功",
                      type: "success",
                    });
                    this.getTablelist()
                  }else{
                       this.$alert(res.data.text, "id不能相同", {
                      confirmButtonText: "确定",
                          callback: (action) => {
                            this.$message({
                              type: "info",
                              message: `action: ${action}`,
                            });
                          },
                    });
                  }
                });
              }
              return
      }
    },
     
     handleDeleteitem(index){
        this.items.splice(index, 1);
     },

    onblurT(item,id){
      console.log(id)
    },
    onblurY(item,id){
     console.log(id)
    },
    onblur(item,id){
      console.log(id)
    },

    handleDelete(index, row) {
     row.isLoading = true;
       this.$confirm('此操作将进行删除操作, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
               this.tableData.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                setTimeout(function () {
                    row.isLoading = false;
                }, 1500)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                row.isLoading = false;
            });
      console.log(index, row);
      // console.log(this.tableData.length)
    },
  },
};
</script>


<style  scoped>
.config_top {
  width: 100%;
  /* border:1px solid #000; */
  display: flex;
  background: #ffffff;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-top: 5px;
  /* padding-right:-10px; */
}
.aonfig_hader {
  width: 100%;
  background: #ffffff;
  margin-top: 30px;
}

  .demo-table-expand {
    font-size: 0;
     margin-left:80px;
     display:flex;
     flex-direction:column
    /* bordeR:1px solid red; */
    
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;  
    width: 100%;
    /* bordeR:1px solid #000; */
  }
  .demo_input
  {
    width:180px;
    margin-left:140px;
  }
</style>
